<template>
  <div>
    <el-card class="tabs">
      <div style="display: flex;justify-content: space-between">
        <el-button type="text" @click="back">返回</el-button>
        <el-button type="text" @click="saveBtn">保存</el-button>
      </div>
      <div style="margin: 10px 0 60px;">
          <div style="margin: 10px 0 20px">
              任务编号: {{formData.Id}}
          </div>
        <div style="margin: 10px 0 20px">
          <custom-input type="textarea" v-model="formData.Name" :rows="1" :autosize="true"
                        class="input" placeholder="任务标题" ref="nameTextarea"></custom-input>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <select-diction v-model="formData.Status" DictTypeCode="TASK_STATUS" placeholder = "当前状态"
                            @selectChange="selectChange"></select-diction>
          </el-col>
          <el-col :span="6">
<!--            <select-diction v-model="formData.Type" DictTypeCode="ROOT_CAUSE_TYPE" placeholder = "指派人"></select-diction>-->
            <select-project-team v-model="formData.Acceptid" :queryValue="projectTeamQueryValue" placeholder = "指派人"></select-project-team>
          </el-col>
          <el-col :span="6">
<!--            <select-diction v-model="formData.Type" DictTypeCode="ROOT_CAUSE_TYPE" placeholder = "开始时间"></select-diction>-->
            <el-date-picker v-model="formData.Started" placeholder = "开始时间" type="datetime" value-format="timestamp"></el-date-picker>
          </el-col>
          <el-col :span="6">
<!--            <select-diction v-model="formData.Type" DictTypeCode="ROOT_CAUSE_TYPE" placeholder = "结束时间"></select-diction>-->
            <el-date-picker v-model="formData.Ended" placeholder = "结束时间" type="datetime" value-format="timestamp"></el-date-picker>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-tabs v-model="first" @tab-click="tabsChange">
          <el-tab-pane label="验收标准" name="1">
            <mark-down v-model="formData.Acceptance" placeholder="验收标准" class="markdown"></mark-down>
          </el-tab-pane>
          <el-tab-pane label="基本信息" name="2">
            <base-info :form-data="curFormData"></base-info>
          </el-tab-pane>
          <el-tab-pane label="关联" name="3">
            <feed-back :form-data="curFormData" ref="feedBack"></feed-back>
          </el-tab-pane>
          <el-tab-pane label="工时" name="4">
            <working-hours :datas="formData.workingHours" :form-data="curFormData" ref="workingHours"></working-hours>
          </el-tab-pane>
          <el-tab-pane label="附件" name="5">
            <file-opear :datas="formData.fileName" :form-data="curFormData" ref="fileOpear"></file-opear>
          </el-tab-pane>
<!--          <el-tab-pane label="需求" name="6">-->
<!--            <drag-demand ref="dragDemand"></drag-demand>-->
<!--          </el-tab-pane>-->
        </el-tabs>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import SelectDiction from '@/components/element/SelectDiction'
import SelectProjectTeam from "@/components/element/select/SelectProjectTeam";
import fileOpear from "./file/fileOpear";
import workingHours from "./file/workingHours";
import markDown from "@/components/element/markdown/markDown";
import feedBack from "./file/feedBack";
import customInput from "@/components/element/input/customInput";
import bus from '@/components/common/bus';
import baseInfo from "./file/baseInfo";
import projectTaskApi from "@/api/projectTaskApi";
import dragDemand from "./demandTrag/dragDemand";

export default {
  name: 'taskEditItem',
  components: {
    SelectDiction,
    fileOpear,
    workingHours,
    markDown,
    feedBack,
    customInput,
    SelectProjectTeam,
    baseInfo,
    dragDemand
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    curFormData: {
      get () {
        return this.formData
      },
      set (val) {
        this.$emit('update:formData', val)
      }
    }
  },
  data () {
    return {
      first: '2',
      projectTeamQueryValue: { id: this.formData.Projectid }
      // formData: {
      //   Name: '',
      //   Type: '',
      //   workingHours: [],
      //   fileName: []
      // }
    }
  },
  methods: {
    tabsChange (aa) {
      if (aa.name === '6') {
        this.$nextTick(() => {
          // this.$refs.dragDemand.initCanvasWH()
        })
      }
      if (aa.name === '3') {
        this.$nextTick(() => {
          this.$refs.feedBack.getTestById()
        })
      }
    },
    // 保存
    saveBtn () {
      // 进行中
      if (this.curFormData.Status === '2') {
        if (!this.curFormData.Progress) {
          this.curFormData.Progress = '1'
        }
        if (this.curFormData.Progress === 100) {
          this.curFormData.Progress = '1'
        }
      }
      // 已完成
      if (this.curFormData.Status === '3') {
        this.curFormData.Progress = '100'
      }
      projectTaskApi.update(this.curFormData).then(res => {
        if (res) {
          this.$message({ type: res.code === 1 ? 'success':'warning', message: res.message });
        }
      })
    },
    // 加载人
    loadProjectTeam () {
      this.projectTeamQueryValue = { id: this.formData.Projectid }
      this.$refs.fileOpear.setIas()
      this.$refs.workingHours.percentageFun()
    },
    // 返回上一级
    back () {
      if (this.formData.Planid) {
        this.$router.push(`/view/project/task/${this.formData.Planid}`)
        bus.$emit('showTaskByIdClose')
      }
    },
    selectChange (id, ids) {
      if (id === '5') {
        if (this.$refs.nameTextarea) {
          this.$refs.nameTextarea.$el.style.textDecoration = 'line-through'
          this.$refs.nameTextarea.$el.style.textDecorationColor = '#eee'
        }
      } else {
        if (this.$refs.nameTextarea) {
          this.$refs.nameTextarea.$el.style.textDecoration = 'none'
          this.$refs.nameTextarea.$el.style.textDecorationColor = 'transaction'
        }
      }
    },
  }
}
</script>

<style scoped>
.el-date-editor {
  width: 100%;
}
.markdown /deep/ .markdown-body {
  z-index: 100;
}
</style>